<template>
  <!-- 页面布局card通用组件 -->
  <PageCard>
    <!-- 头部工具栏 -->
    <ToolBar>
      <el-row :gutter="24">
          <el-col :span="24" class="barMarginBottom">
            <el-button v-show="$btnPermission.verify('MenuAdd')" type="primary" :loading="loading" @click="addMenu">新增</el-button>
          </el-col>
        </el-row>
    </ToolBar>

    <!-- 树形table表格 -->
    <TreePage :tree-datas.sync="menuTreeDatas" :columns.sync="columns" :default-expand-all="false"></TreePage>

    <!-- 新增 -->
    <AddMenu ref="addMenu" :title.sync="addMenuTitle" :rowId.sync="rowId" :menuParentId.sync="menuParentId" :showDialog.sync="addMenuVisible" @reloadData="loadTreeData"/>
  </PageCard>
</template>
<script>
import PageCard from '@/components/PageCard/index.vue'
import ToolBar from '@/components/ToolBar/index.vue'
import TreePage from '@/components/TreePage/index.vue'

import AddMenu from './components/addMenu.vue'

import { menuList, menuDelete } from '@/api/menu'

export default {
  name: 'PageMenu',
  components: {
    PageCard,
    ToolBar,
    TreePage,
    AddMenu
  },
  data(){
    return {
      loading: false,
      menuTreeDatas: [],
      columns:[{
        title: '菜单名称',
        name: 'menuName',
        align: 'center',
        width: 150
      }, {
        title: '菜单类型',
        name: 'menuType',
        width: 150,
        align: 'center',
        select: true,
        options: this.$config.MENU_TYPE
      }, {
        title: '权限值',
        name: 'menuValue',
        align: 'center',
        width: 300
      }, {
        title: '排序值',
        name: 'sort',
        align: 'center',
        width: 100
      }, {
        title: '操作',
        name: 'operate',
        width: 200,
        operate: [{
          name: '添加下级',
          permission: 'AddNext',
          fun: this.addNext
        }, {
          name: '编辑',
          permission: 'MenuEdit',
          fun: this.editMenu,
          customStyle: {
            "margin-left": "10px"
          }
        }, {
          name: '删除',
          confirm: true,
          message: '确定删除选择的数据吗?',
          permission: 'MenuDelete',
          fun: this.deleteMenu,
          customStyle: {
            "margin-left": "10px"
          }
        }]
      }],
      addMenuVisible: false,
      menuParentId: null,
      addMenuTitle: null,
      rowId: null,
    }
  },
  created() {
    // 加载数据
    this.loadTreeData()
  },
  methods: {
    // 请求获取数据
    async loadTreeData(){
      const res = await menuList()
      this.menuTreeDatas = res.data
    },

    // 新增
    addMenu(){
      this.addMenuTitle = '新增'
      this.menuParentId = null
      this.addMenuVisible = true
    },

    // 添加下一级
    addNext(row){
      if(!row) return;

      this.addMenuTitle = '新增'
      this.menuParentId = row.id
      this.addMenuVisible = true
    },

    // 编辑
    editMenu(row){
      if(!row) return;

      this.rowId = row.id
      this.addMenuTitle = '编辑'
      this.addMenuVisible = true
    },

    // 删除数据
    async deleteMenu(row){
      if(!row) return;

      await menuDelete(row.id)
      this.$message.success('删除成功')
      this.loadTreeData()
    }
  },
}
</script>